<template>
  <div class="box">
    <div :class="'top ' + active">
      <span>我的</span>
    </div>
    <!-- 头像 -->
    <div class="user">
      <div>
        <img src="../../static/shop1.png" alt="" />
      </div>
      <p>森系女孩</p>
    </div>
    <!-- 订单 -->
    <div class="order">
      <van-cell
        title="我的订单"
        is-link
        value="查看全部订单"
        link-type="reLaunch"
        url="/pages/my/order"
      />
      <div class="order-bottom">
        <dl>
          <dt>
            <span class="iconfont icon-daifukuan"></span>
          </dt>
          <dd>待付款</dd>
        </dl>
        <dl>
          <dt>
            <span class="iconfont icon-keshiyong"></span>
          </dt>
          <dd>可使用</dd>
        </dl>
        <dl>
          <dt>
            <span class="iconfont icon-daishouhuo"></span>
          </dt>
          <dd>待收货</dd>
        </dl>
        <dl>
          <dt>
            <span class="iconfont icon-daipingjia"></span>
          </dt>
          <dd>待评价</dd>
        </dl>
        <dl>
          <dt>
            <span class="iconfont icon-shouhou"></span>
          </dt>
          <dd>退款/售后</dd>
        </dl>
      </div>
    </div>
    <!-- 中间小图标 -->
    <div class="center">
      <dl>
        <dt>
          <span class="iconfont icon-wodekanjia"></span>
        </dt>
        <dd>我的砍价</dd>
      </dl>
      <dl>
        <dt>
          <span class="iconfont icon-dingdan"></span>
        </dt>
        <dd>我的拼单</dd>
      </dl>
      <dl>
        <dt>
          <span class="iconfont icon-choujiang"></span>
        </dt>
        <dd>我的抽奖</dd>
      </dl>
      <dl>
        <dt>
          <span class="iconfont icon-tuiguang"></span>
        </dt>
        <dd>加入推广</dd>
      </dl>
      <dl>
        <dt>
          <span class="iconfont icon-wodeyouhuiquan"></span>
        </dt>
        <dd>我的优惠</dd>
      </dl>
      <dl>
        <dt>
          <span class="iconfont icon-wodepingjia"></span>
        </dt>
        <dd>我的评价</dd>
      </dl>
      <dl>
        <dt>
          <span class="iconfont icon-wodeshoucang"></span>
        </dt>
        <dd>我的收藏</dd>
      </dl>
      <dl>
        <dt>
          <span class="iconfont icon-wodeguanzhu"></span>
        </dt>
        <dd>我的关注</dd>
      </dl>
      <dl>
        <dt>
          <span class="iconfont icon-shangpin"></span>
        </dt>
        <dd>美味心选</dd>
      </dl>
    </div>
    <div class="cell">
      <van-cell
        title="手机号"
        is-link
        value="151****5356"
        link-type="reLaunch"
        url="/pages/index/index"
      />
      <van-cell
        title="意见反馈"
        is-link
        link-type="reLaunch"
        url="/pages/my/feedback"
      />
      <van-cell
        title="设置"
        is-link
        link-type="reLaunch"
        url="/pages/my/set"
      />
    </div>
    <div class="bottom">
      <van-cell
        title="联系我们"
        is-link
        value='4008166477'
        link-type="reLaunch"
        url="/pages/index/index"
      />
      <!-- <van-popup
  show
  position="bottom"
  custom-style="height: 20%;"
  bind:close="onClose"
/> -->
    </div>
  </div>
</template>

<script>
import "../../static/font-my/iconfont.css";
import {toLogin} from '../../service/login'
export default {
  data() {
    return {
      active: "",
      nickname:'请登录'
    };
  },
  onPageScroll(e) {
    if (e.scrollTop > 10) {
      this.active = "active";
    } else {
      this.active = "";
    }
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
  .top {
    width: 100%;
    margin-top: 60rpx;
    height: 70rpx;
    display: flex;
    justify-content: start;
    align-items: center;
    span {
      margin-left: 10rpx;
    }
  }
  .user {
    margin-top: 30rpx;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    div {
      margin-left: 10rpx;
      img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
    }
    p {
      font-style: 35rpx;
      margin-left: 20rpx;
    }
  }
  .order {
    margin: 10rpx 10rpx;
    width: 95%;
    background: #fff;
    border-radius: 20rpx;
    .order-head {
      width: 100%;
      height: 44rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p:nth-child(1) {
        margin-left: 10rpx;
        font-size: 35rpx;
      }
      p:nth-child(2) {
        margin-right: 10rpx;
        font-size: 30rpx;
        color: #ccc;
      }
    }
    .order-bottom {
      width: 100%;
      display: flex;
      justify-content: space-around;
      dl {
        dt {
          text-align: center;
          span {
            font-size: 50rpx;
          }
        }
        dd {
          font-size: 30rpx;
        }
      }
      dl:nth-child(1) {
        dt > span {
          color: #07a477;
        }
      }
      dl:nth-child(2),
      dl:nth-child(3) {
        dt > span {
          color: #039cff;
        }
      }
      dl:nth-child(4) {
        dt > span {
          color: #fd636b;
        }
      }
      dl:nth-child(5) {
        dt > span {
          color: #ffb307;
        }
      }
    }
  }
  .center {
    width: 100%;
    margin-top: 10rpx;
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    dl {
      width: 20%;
      margin: 20rpx;
      dt {
        text-align: center;
        span {
          font-size: 50rpx;
        }
      }
    }
  }
  .cell {
    width: 100%;
    margin-top: 10rpx;
    background: #fff;
  }
  .bottom{
      width: 100%;
      margin-top: 10rpx;
  }
}
</style>